<template>
  <div
    class="notification border-1 rounded-md"
    @mouseover="emits('messageStatus', true)"
    @mouseleave="emits('messageStatus', false)"
  >
    <div class="title flex items-center p-2 justify-between">
      <h4>{{$t('header.notice')}}</h4>
      <a-button type="text" :disabled="isRead">{{ $t('header.noticeStatus') }}</a-button>
    </div>
    <div class="content p-2">
      <div class="list py-2 cursor-pointer" v-for="item in 10" @click="">
        <h2 class="text-lg">我是标题我是标题我是标题我是标题我是标题</h2>
        <p class="subtitle text-zinc-300">我是副标题</p>
        <p class="create_time">2024-10-28</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isRead = ref(false)

const emits = defineEmits(['messageStatus'])
</script>

<style lang="scss" scoped>
.notification {
  position: absolute;
  top: 64px;
  right: 20px;
  background: #fff;
  z-index: 9999;
  width: 300px;
  border: 1px solid #e4e4e4;
  .title {
    border-bottom: 1px solid #e4e4e4;
  }
  .content {
    height: 300px;
    overflow: scroll;
  }
  .content::-webkit-scrollbar {
    width: 5px;
  }
}
</style>